<template>
  <!-- tabs组件 -->
  <view style="width: 100%">
    <scroll-view
      class="scroll"
      scroll-x="true"
      scroll-with-animation
      :scroll-left="scrollLeft"
    >
      <view
        v-for="(item, index) in list"
        :key="index"
        @click="getColor(item, index)"
        class="flex-shrink px-2 py-1 scroll-item"
        :class="act === index ? 'active-item' : 'item'"
        >{{ item }}</view
      >
    </scroll-view>
  </view>
</template>

<script>
export default {
  props: {
    // 传入的数组，格式:['xxxx','xxx','xxxx']
    list: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      act: 0, //高亮显示
      scrollLeft: 0, //滚动位置
    };
  },
  methods: {
    // 切换当前Tab
    getColor(item, index) {
      this.act = index; //点击的高亮
      this.$emit("getTabs", item); //点击后传数据给父组件
      this.moveTo(index); //滚动到中间
    },
    // 将点击元素移动到中间
    moveTo(index) {
      const query = uni.createSelectorQuery().in(this);
      query
        .selectAll(`.scroll-item`) //拿到每一个tabs标签
        .boundingClientRect((rect) => {
          const { windowWidth } = uni.getSystemInfoSync(); //获取屏幕宽度
          let width = 0;
          // 循环获取计算当前点击的标签项距离左侧的距离
          for (let i = 0; i < index; i++) {
            width += rect[i].width;
          }
          // 当大于屏幕一半的宽度则滚动，否则就设置位置为0
          if (width > windowWidth / 2) {
            this.scrollLeft = width + rect[index].width / 2 - windowWidth / 2;
          } else {
            this.scrollLeft = 0;
          }
        })
        .exec();
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll {
  width: 100%;
  white-space: nowrap; //标签不换行

  .active-item {
    font-weight: bold;
    font-size: 32rpx;
    color: rgba(34, 34, 34, 1);
    border-bottom: 2px solid rgba(2, 117, 255, 1);
  }
  .item {
    font-weight: normal;
    font-size: 28rpx;
  }

  view {
    width: 33.3%;
    display: inline-block;
    font-size: 30upx;
    font-weight: 400;
    line-height: 42upx;
    padding: 18upx 30upx;
    text-align: center;
    color: #000;
    position: relative;

    &.active {
      font-size: 36upx;
      font-weight: 800;
      line-height: 50upx;
    }

    &.active::after {
      content: "";
      display: block;
      width: 100%;
      border-left: 30upx solid #fff;
      border-right: 30upx solid #fff;
      box-sizing: border-box;
      height: 19upx;
      position: absolute;
      left: 0;
      bottom: 19upx;
      background: #ffc385;
      z-index: -1;
    }
  }
}
</style>